<template>
  <view class="gi-wf-page">
    <gi-sticky>
      <view class="tabs">
        <sar-tabs v-model:current="current" type="pill" :list="list"></sar-tabs>
      </view>
    </gi-sticky>

    <gi-gap></gi-gap>

    <view v-show="current === 0" class="gi-wf-page__pane1">
      <slot></slot>
    </view>

    <view v-show="current === 1" class="gi-wf-page__pane2">
      <sar-timeline>
        <sar-timeline-item v-for="(item, index) in props.recordList" :key="index" :title="item.taskName">
          <view class="timeline-item__content">
            <gi-descriptions>
              <gi-descriptions-item label="开始时间" :value="item.createTime"></gi-descriptions-item>
              <gi-descriptions-item label="结束时间" :value="item.endTime"></gi-descriptions-item>
              <gi-descriptions-item label="处理部门" :value="item.auditDeptName"></gi-descriptions-item>
              <gi-descriptions-item label="处理人" :value="item.auditUsername"></gi-descriptions-item>
              <gi-descriptions-item label="处理时长(h)">0.5h</gi-descriptions-item>
              <gi-descriptions-item label="备注说明" :value="item.auditMessage"></gi-descriptions-item>
            </gi-descriptions>
          </view>
        </sar-timeline-item>
      </sar-timeline>
    </view>

    <view v-show="current === 2" class="gi-wf-page__pane3">
      <image v-if="props.workflowImageUrl" :src="props.workflowImageUrl" mode="widthFix"></image>
      <sar-empty v-else />
    </view>
  </view>
</template>

<script lang='ts' setup>
import type { TabOption } from 'sard-uniapp'

interface Props {
  recordList: any[]
  workflowImageUrl: string
  hideBaseInfoTab?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  recordList: () => [],
  WorkflowImageUrl: '',
})

const current = ref(0)

const list = ref<TabOption[]>([
  { title: '基本信息' },
  { title: '审批记录' },
  { title: '流程图' },
])
</script>

<style lang='scss' scoped>
.gi-wf-page {
  .tabs {
    padding: 8px 10px;
    background-color: #fff;
  }
}

.gi-wf-page__pane2,
.gi-wf-page__pane3 {
  padding: 20px 0;
  background-color: #fff;
}

.timeline-item__content {
  padding: $padding;
  overflow: hidden;
  background-color: #f5f7fb;
  border-radius: 4px;
  box-sizing: border-box;
  margin-right: 10px;
}
</style>
